<template>
	<view class="personal-info-page">
		<uni-page-header title="完善信息" />
		<view class="form-wrap">
			<u--form ref="uForm" label-width="auto" label-position="left" :model="formData" :rules="formRules">
				<u-form-item label="头像" border-bottom>
					<view class="avatar-wrap">
						<u-avatar :src="formData.image" />
						<u-icon name="arrow-right" size="18" color="#000" />
						<div style="width: 100%;height: 100%;position: absolute">
							<get-avatar @get:avatar="onAvatarUpdate" />
						</div>
					</view>
				</u-form-item>
				<u-form-item label="姓名" border-bottom>
					<u--input v-model="formData.name" border="none" input-align="right" placeholder="请填写" />
				</u-form-item>
				<u-form-item label="手机号" border-bottom>
					<u--input v-model="formData.mobilephone" readonly border="none" input-align="right" />
				</u-form-item>

				<u-form-item label="性别" border-bottom @click="genderPickerShow = true">
					<u--input v-model="formData.genderShow" readonly border="none" input-align="right" placeholder="请选择"
						suffix-icon="arrow-right" suffix-icon-style="color: #000" />
				</u-form-item>

				<u-form-item label="生日" border-bottom @click="onOpenDatePicker">
					<u--input v-model="formData.birthday" readonly border="none" input-align="right" placeholder="请选择"
						suffix-icon="arrow-right" suffix-icon-style="color: #000" />
				</u-form-item>
			</u--form>
		</view>

		<view class="action-btn">
			<u-button color="#78ffe6" text="保存" shape="circle" :loading="submitLoading" @click="onSubmit" />
		</view>

		<u-picker :show="genderPickerShow" :columns="genderOptions" confirm-color="#78ffe6"
			:default-index="defaultIndex" @cancel="genderPickerShow = false" @confirm="onGenderPickerConfirm" />

		<u-datetime-picker ref="datePickerRef" v-model="datePicker.value" :show="datePicker.show" mode="date"
			:min-date="minData" :max-date="maxData" close-on-click-overlay confirm-color="#78ffe6"
			@cancel="datePicker.show = false" @confirm="onDatetimePickerConfirm" />
	</view>
</template>

<script>
	import dayJs from 'dayjs'
	import {
		mapState,
		mapActions
	} from 'vuex'
	import {
		wx_customer_upd
	} from '../api/index.js'
	import {
		uploadFile,
		getImg
	} from '@/utils'

	export default {
		name: 'PersonalInfo',
		data() {
			return {
				minData: dayJs('1900-01-01').valueOf(),
				maxData: dayJs('2050-12-31').valueOf(),
				datePicker: {
					show: false,
					value: dayJs().valueOf()
				},
				genderPickerShow: false,
				defaultIndex: [0],
				formData: {
					birthday: '',
					gender: 1,
					genderShow: '男',
					name: '',
					mobilephone: '',
					image: ''
				},
				formRules: {},
				genderEnum: {
					'未知': 0,
					'男': 1,
					'女': 2
				},
				genderOptions: [
					['男', '女', '未知']
				],
				submitLoading: false
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		onLoad() {
			console.log('用户信息')
			console.log(this.userInfo)
			const {
				name,
				gender,
				mobile,
				birthday,
				avatar
			} = this.userInfo
			this.formData.name = name
			this.formData.image = avatar || ''
			this.formData.gender = this.genderEnum[gender]
			this.formData.genderShow = gender
			this.formData.birthday = birthday ? dayJs(birthday).format('YYYY-MM-DD').valueOf() : ''
			console.log(this.$refs.datePickerRef)

			if (birthday) {
				this.$nextTick(() => {
					this.$refs.datePickerRef.innerValue = this.formData.birthday
				})
			}

			this.defaultIndex = [this.genderOptions[0].findIndex(e => e === gender)]
			this.formData.mobilephone = this.$utils.desensitizePhone(mobile)
		},
		methods: {
			...mapActions(['getUserInfo']),
			onGenderPickerConfirm(data) {
				const value = data.value[0]
				this.formData.genderShow = value
				this.formData.gender = this.genderEnum[value]
				this.genderPickerShow = false
			},

			onDatetimePickerConfirm({
				value
			}) {
				this.formData.birthday = this.$utils.dateFormat(value, 'YYYY-MM-DD')
				this.datePicker.show = false
			},

			onOpenDatePicker() {
				if (!this.formData.birthday) this.datePicker.show = true
			},

			// 获取微信头像
			async onAvatarUpdate(avatarUrl = '') {
				console.log(avatarUrl, '个人头像')
				const res = await uploadFile(avatarUrl, 0, {
					filetype: 'jpg',
					name: 'file'
				})

				const linkUrl = getImg({
					i: res.fileid,
					n: 'topic-img'
				})
				this.formData.image = linkUrl
			},

			async onSubmit() {
				const {
					name,
					birthday,
					gender,
					image
				} = this.formData
				let params = {
					name,
					gender,
					image
				}
				if (this.userInfo.is_birthday_reset) {
					this.$set(params, 'birthday', birthday)
				}
				uni.showLoading()
				await wx_customer_upd(params)
				uni.hideLoading()
				this.getUserInfo()
				this.$utils.showToast('保存成功')
				this.$utils.navigateBackToPage()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.personal-info-page {
		.form-wrap {
			width: 95%;
			padding: 20rpx;
			padding-top: 0;
			margin: 20rpx auto;
			border-radius: 10rpx;
			background-color: #FFF;

			.avatar-wrap {
				position: relative;
				@include flex-end;
				gap: 20rpx;
			}
		}
	}

	::v-deep.action-btn {
		width: 100%;
		@include flex-center;
		position: fixed;
		bottom: 200rpx;
		left: 50%;
		transform: translateX(-50%);

		button {
			width: 60%;
			color: #000 !important;
			font-weight: bolder;
		}
	}
</style>